import React, { Component } from 'react';

import { SingleLine } from '@/components/Chart/device'
import styled from 'styled-components';

const MyButton = styled.div`
  position: absolute;
  width: calc(100% + 20px);
  left: -20px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  background: #0880DF;
  color: #fff;
  &::selection{
    background:none;
  }
  &:hover {
    cursor: pointer;
  }
`

class Chart extends Component<any> {
  render() {
    const { styles, time, count } = this.props;
    if (this.refs.myRef) {
      SingleLine({
        ...styles,
        ref: this.refs.myRef,
        name: time,
        data: count
      })
    }

    return (
      <div style={{ 'height': '200px' }}>
        <div ref="myRef" style={{ 'height': '200px' }}></div>
        <MyButton onClick={() => this.props.close()}>关闭</MyButton>
      </div>
    )
  }
}

export default Chart